<template>
  <Card>
    <Tabs>
      <TabPane label="包车收入明细">
        <div class="searchBox">
          <Form ref="searchForm" :label-width="90" :model="searchForm" class="search-form" inline>
            <Form-item label="车牌号：" prop="license_plate_num">
              <Input
                v-model="searchForm.license_plate_num"
                clearable
                placeholder="支持模糊搜索"
                style="width: 200px"
                type="text"
              />
            </Form-item>
            <Form-item label="日期范围：" prop="date_time">
              <DatePicker
                v-model="searchForm.date_time"
                placeholder="请选择日期范围"
                placement="bottom-start"
                style="width: 200px"
                type="daterange"
              ></DatePicker>
            </Form-item>
            <Form-item style="margin-left:-90px;">
              <Button icon="md-search" type="primary" @click="handleSearch">搜索</Button>
              <Button @click="handleReset">重置</Button>
            </Form-item>
          </Form>
        </div>
        <div class="btns">
          <Button icon="ios-add" target="_self" type="primary" @click="toAdd">添加</Button>
          <upload-file ref="uploadCardFile" button-name="导入" @on-change="uploadData($event)"></upload-file>
          <Button icon="md-trash" type="error" @click="delAll">删除</Button>
        </div>
        <div class="table">
          <Row>
            <Alert show-icon>
              已选择
              <span class="select-count">{{ selectCount }}</span> 项
              <a class="select-clear" @click="clearSelectAll">清空</a>
            </Alert>
          </Row>
          <Row>
            <Table
              ref="table"
              :columns="columns"
              :data="data"
              :loading="loading"
              border
              size="small"
              @on-selection-change="showSelect"
            >
              <template slot="action" slot-scope="{ row }">
                <a
                  class="edit"
                  size="small"
                  style="color:#2d8cf0;font-size: 12px;"
                  type="text"
                  @click="edit(row)"
                >编辑</a>
                <Divider type="vertical"/>
                <a class="del" style="color:#ed4014;font-size: 12px;" @click="del(row)">删除</a>
              </template>
            </Table>
          </Row>
          <Row class="page" justify="end" type="flex">
            <Page
              :current="searchForm.pageNumber"
              :page-size="searchForm.pageSize"
              :total="total"
              show-total
              @on-change="changePage"
            />
          </Row>
        </div>
      </TabPane>
      <TabPane label="包车收入统计">
        <div>
          <Row>
            <Col span="24">
            <Card>
              <div style="position:relative;">
                <iframe
                  :height="iframeHeight"
                  :src="url2"
                  class="iframe"
                  frameborder="0"
                  scrolling="auto"
                  width="100%"></iframe>
              </div>
            </Card>
            </Col>
          </Row>
        </div>
      </TabPane>
    </Tabs>
  </Card>
</template>
<script>
import UploadFile from '../my-components/upload-file'
import {charterBusList, delCharterBus, importCharterBus} from '../../api/charterBus'

export default {
  components: {
    UploadFile
  },
  data() {
    return {
      url2:
        'http://116.63.90.219:8075/webroot/decision/view/report?viewlet=%25E5%2585%25AC%25E4%25BA%25A4%25E6%258A%25A5%25E8%25A1%25A8%252F%25E7%25BA%25BF%25E8%25B7%25AF%25E5%258C%2585%25E8%25BD%25A6%25E6%2594%25B6%25E5%2585%25A5%25E7%25BB%259F%25E8%25AE%25A1.cpt&__bypagesize__=false',
      iframeHeight: 0,
      total: 0,
      selectCount: 0, // 多选计数
      selectList: [], // 多选数据
      searchForm: {
        license_plate_num: '',
        date_time: [null, null],
        pageNumber: 1, // 当前页数
        pageSize: 10 // 页面大小
      },
      loading: false,
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          type: 'index',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '车牌号',
          key: 'license_plate_num',
          align: 'center'
        },
        {
          title: '日期',
          key: 'date_time',
          align: 'center'
        },
        {
          title: '时间',
          key: 'start_bus_time',
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'created_at',
          align: 'right'
        },
        {
          title: '操作',
          slot: 'action',
          width: 120,
          fixed: 'right',
          align: 'center'
        }
      ],
      data: []
    }
  },
  watch: {
    $route(to, from) {
      if (from.name !== 'CharterBus') {
        this.handleReset()
      }
      this.initUrl()
    }
  },
  mounted() {
    this.init()
    this.initUrl()
  },
  methods: {
    initUrl() {
      this.iframeHeight = this.$parent.$el.clientHeight - 255
      const iframe = document.getElementsByClassName('iframe')
      if (iframe.attachEvent) {
        iframe.attachEvent('onload', function () {
        })
      } else {
        iframe.onload = function () {
        }
      }
    },
    changePage(v) {
      this.searchForm.pageNumber = v
      this.getCharterBusList()
      this.clearSelectAll()
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false)
    },
    del(row) {
      this.$Modal.confirm({
        title: '确认删除',
        loading: true,
        content: '您确认要删除此条数据吗？',
        onOk: () => {
          const ids = row.id
          // 批量删除
          delCharterBus(ids).then(res => {
            this.$Modal.remove()
            if (res.data === true) {
              this.$Message.success(res.message)
              this.getCharterBusList()
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    },
    delAll() {
      if (this.selectCount <= 0) {
        this.$Message.warning('您还未选择要删除的数据')
        return
      }
      this.$Modal.confirm({
        title: '确认删除',
        loading: true,
        content: '您确认要删除所选的 ' + this.selectCount + ' 条数据？',
        onOk: () => {
          let ids = ''
          this.selectList.forEach(function (e) {
            ids += e.id + ','
          })
          ids = ids.substring(0, ids.length - 1)
          // 批量删除
          delCharterBus(ids).then(res => {
            this.$Modal.remove()
            if (res.data === true) {
              this.$Message.success(res.message)
              this.getCharterBusList()
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    },
    edit(row) {
      this.$router.push({
        name: 'editCharterBus',
        params: {
          id: row.id
        }
      })
    },
    getCharterBusList() {
      this.loading = true
      this.clearSelectAll()
      charterBusList(this.searchForm).then(res => {
        this.loading = false
        if (res.data) {
          this.data = res.data.personnel
          this.total = res.data.count
        }
      })
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      // 重新加载数据
      this.getCharterBusList()
    },
    handleSearch() {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getCharterBusList()
    },
    init() {
      this.getCharterBusList()
    },
    showSelect(e) {
      this.selectList = e
      this.selectCount = e.length
    },
    toAdd() {
      this.$router.push({
        name: 'addCharterBus'
      })
    },
    uploadData(event) {
      this.modal = true
      this.importLoading = true
      importCharterBus({url: event.url}).then(res => {
        if (res.data) {
          this.$Message.success(res.message)
          this.getCharterBusList()
        } else {
          this.$Message.error(res.message)
        }
        this.modal = false
        this.importLoading = false
      })
    }
  }
}
</script>
